<template>
  <div class="flex justify-center bg-white pt-4 pb-4">
    <ul class="flex">
      <li
        class="flex items-center cursor-pointer"
        v-for="(i, index) in subMenus"
        :key="i.route"
      >
        <div class="flex items-center" style="flex-direction: column;">
          <div class="bg" :style="{ background: `url(${i.url}) center center no-repeat` }"></div>
          <div class="mt-2 text-current">{{ i.title }}</div>
        </div>
        <div v-if="subMenus.length - 1 > index" class="divider ml-12 mr-12"></div>
    </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
  import { subMenus } from './data/index'
</script>
<style lang="less" scoped>
.bg {
  margin: 0 auto;
  height: 44px;
  width: 44px;
  background-size: 100% 100%;
}
.divider {
  width: 1px;
  height: 42px;
  background: #eaf0f0;
}
</style>
